<template>
	<section class="main">
		<h3 class="nametitle">{{title}}</h3>
		<h4 class="title">服务流程</h4>
		<div class="step"><img src="../../assets/step2.png"/></div>
		<aside class="main_table">
			<table class="table" border="1" bordercolor="#e5e5e5">
				<thead>
					<tr>
						<th width="6.7%">序号</th>
						<th width="15.27%">专利名称</th>
						<th width="15.27%">委托日</th>
						<th width="15.27%">代理人</th>
						<th width="15.27%">目前进度</th>
						<th width="32.22%" class="tl">预计完成时间</th>
					</tr>
				</thead>
				<tbody v-if="tableDate && tableDate.length>0">
					<tr v-for="(item,index) in tableDate" @click="toDetail(item.id)">
						<td>{{(pageSize*(pageNumber-1))+(index+1)}}</td>
						<td>{{item.patentName}}</td>
						<td>{{item.entrustDate | formatDate}}</td>
						<td>{{item.agentUser}}</td>
						<td>{{item.progressName}}</td>
						<td class="tl">{{item.planfinishDate | formatDate}}</td>
					</tr>
				</tbody>
				<tbody v-else>
					<tr>
						<td colspan="6">暂无数据</td>
					</tr>
				</tbody>
			</table>
		</aside>
		<div v-show="allPageSize>1">
			<mo-pages :page-index="pageNumber" :total="total" :page-size="pageSize" @change="pageChange"></mo-pages>
		</div>
	</section>
</template>

<script>
	import moPages from "@/components/pages"
	export default{
		components:{
			moPages:moPages
		},
		data (){
			return {
				title:"处理中专利信息",
				status:1,//表示处理中
				pageNumber:1,
				pageSize:10,
				total:'',//总的条数
				tableDate:[],
				allPageSize:'',
			}

		},
    filters:{
      formatDate:function(value){
        if(value!=null && value!=''){
          if(value.indexOf(' ')!=-1){
            value=value.split(" ")[0];
          }
        }
        return value;
      }
    },
		created(){
			this.setTitle();
			this.setActive();
			this.getList();
		},
		methods:{
			setTitle(){
				//设置上面的标题
				this.$emit("getTitle",this.title);
			},
			setActive(){
				//设置左侧的菜单高亮
				this.$root.Bus.$emit("nowActive","05")
			},
			toDetail(number){
				this.$router.push({path:"inDeclarationDetail",query:{id:number}})
			},
			getList (){
				this.$ajax.get(this.global.url+"/api/user/patentinfolist?pageNumber="+this.pageNumber+"&pageSize="+this.pageSize+"&status="+this.status).then(res=>{
					let data=res.data;
					this.tableDate=[];
					if(data.code=="200"){
						if(data.data && data.data.records){
							this.tableDate=data.data.records;
						}
						this.total=data.data.total;
						this.allPageSize=data.data.pages;
					}
					else{
						this.total=0;
					}
				}).catch(error=>{
					console.log(error)
				})
			},
			pageChange(page){
				this.pageNumber=page;
				this.getList();
			}
		}
	}
</script>

<style scoped>
	.main{
		padding:1.5rem 7% 1.5rem 7%;
		width: 100%;
		height: 100%;
		overflow-y: auto;
	}
	.main .title{
		font-size:1rem;
		line-height:1.5rem;
		text-align: center;
		color:#53306c;
		margin-bottom:2.4rem;
	}
	.step{
		width:100%;
		margin-bottom: 4.2rem;
	}
	.step img{
		width:100%;
	}
	.main_table{
		width:100%;
		overflow: auto;
		margin-bottom: 1rem;
	}
	.table{
		width:100%;
		min-width:1000px;
		text-align:center;
		border-collapse:collapse;
		border-spacing:0;
		background: #fff;
		font-size: 14px;
	}
	.table thead th{
		background: #53306c;
		color:#fff;
		padding:0.75rem 1rem;
		line-height: 22px;
		font-weight: normal;
		/*height: 64px;*/
	}
	.table tbody tr{
		cursor: pointer;
	}
	.table tbody td{
		color:#333333;
		/*height: 64px;*/
		padding:0.75rem 1rem;
		line-height: 22px;
    word-break:break-all;
	}
	.table .tl{
		text-align: left;
		padding-left:4.2%;
	}
	.nametitle{
		font-size: 1.5rem;
		color:#53306c;
		text-align: center;
		line-height: 2.5rem;
		margin-bottom: 1.5rem;
		margin-top:1.5rem;
		display: none;
	}
	@media only screen and (min-width:960px) and (max-width:1440px){
		.main{
			padding:1.5rem 2rem;
		}
	}
	@media only screen and (min-width: 320px) and (max-width: 959px) {
		.main{
			padding: 0px 1.5rem 1.5rem 1.5rem;
		}
		.nametitle{
			display: block;
		}
		.step{
			margin-bottom: 2.1rem;
		}
	}
</style>
